<html>
<style>
canvas, img { border:1px solid gray; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<canvas id="canvas" width="512" height="512"></canvas>
<script>
var img = document.getElementById("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var dx = 150;
var x = canvas.width/2 - dx;
var y = 80;
var width = 2*dx;
var height = canvas.height - 2*y;
//ctx.lineWidth = 20;
//ctx.strokeStyle = "black";
//ctx.strokeRect(x, y, width, height);
dxy = 20;
ctx.fillStyle = "#96F5E6";
ctx.fillRect(x + dxy, y + dxy, width, height);
ctx.fillStyle = "#3892cb";
ctx.fillRect(x, y, width, height);

ctx.strokeStyle = "gray";
ctx.lineWidth = 20;
ctx.lineCap = "round";
dx0 = -20;
dy0 = 50;
dy = 60;
for(i=0; i<5; i++){
	ctx.moveTo(x + dx0, y + dy0 + i * dy );
	ctx.lineTo(x + dx0 + 40, y + dy0 + i * dy);
}
ctx.stroke();

ctx.fillStyle = "white";
ctx.font = "300px 方正粗圆简体";
var text = "￥";
var x = (canvas.width - ctx.measureText(text).width)/2;
ctx.fillText(text, x, 360);

</script>
</html>